<template>
	<el-menu :default-active="activeIndex" :router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		<el-menu-item index="home">首页</el-menu-item>
		<el-menu-item v-for="item in navbarList" :index="item.router">{{item.name}}</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
		data() {
			return {
				navbarList: [
					{
						"id": "2",
						"name": "文档中心",
						"router":  "/documents"
					},
					{
						"id": "3",
						"name": "FAQ",
						"router": "/faq"
					},
					{
						"id": "4",
						"name": "常用工具",
						"router": "/tools"
					}
				],
				activeIndex: '1'
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				this.activeIndex = key
				console.log(key, keyPath)
			}
		}
	}
</script>
